<template>
    <div>
        <!-- 1.热歌榜图片 -->
        <div class="info">
            <img src="@/assets/images/hot_music_bg_3x.jpg" width="100%">
        </div>
        <!-- 2. 热歌列表 -->
        <MusicList :list="list" :isShow="false">
            <!-- v-slot: 可以简写成# -->
            <template #code="obj"> 
                <div class="code" :class="{'code-red':obj.index < 3}">{{ obj.index > 8 ? obj.index + 1 : '0' + (obj.index+1) }}</div>
            </template>
        </MusicList>
        <!-- <div class="list" v-for="(item,index) in list" :key="item.id">
            <div class="code" :class="{'code-red':index < 3}">{{ index > 8 ? index + 1 : '0' + (index+1) }}</div>
            <div class="list-item">  
                <div class="left">
                    <div class="subtitle">{{item.name}}<span>{{item.alia[0]}}</span></div>
                    <div class="author">
                        <span v-for="ele in item.ar" :key="ele.id" class="ele">
                            {{ ele.name }} 
                        </span>
                        - {{ item.al.name }}
                    </div>
                </div>
                <div class="right">
                    <img src="@/assets/images/play.png" alt="">
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
import MusicList from '@/components/MusicList.vue'
export default {
    components:{
        MusicList
    },
    data(){
        return {
            list: [], // 音乐列表数据
        }
    },
    created() {
        this.getPlaylist()
    },
    methods: {
        // 获取热歌榜数据-----------------------------------------
        async getPlaylist(){
            let res = await this.$api.getPlaylist()
            console.log('获取热歌榜数据',res.data.playlist.tracks);
            this.list = res.data.playlist.tracks;
        }
    }
}
</script>

<style lang="less" scoped>
/* 热歌榜音乐 */
.list {
    display: flex;
    .code {
        width: 1rem; 
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 16px;
    }
    .code-red{
        color: #df3436;
    }
}
.list-item {
    border-bottom: 1px solid #eee;
    /* padding-left: 10px; */
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    /* flex: 1; */
    width: 6.5rem;
    .left {
        flex:1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
    }
    .right {
        width: .9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: .4rem;
            height: .4rem;
        }
    }
    .subtitle {
        font-size: 17px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        span {
            /* font-size: 12px; */
            color: #888;
        }
    }
    .author {
        margin-top: 4px;
        font-size: 12px;
        color: #888;
        .ele {
            &::after{
                content:'/';
            }
        }
        .ele:last-child {
            &::after{
                content:'';
            }
        }
    }
}
</style>